<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}

		.nev{
			height: 200px;
			background-color: blue;
		}

		.header{
			height: 50px;
			background-color: red;
			width: 100%;  /* 宽度必须要有 */
		}

		.header.fixed{
			position: fixed;
			top: 0;
		}

		.content{
			height: 1200px;
			background-color: yellow;
		}

		.content.fixed{
			margin-top: 50px
		}

		.floot{
			height: 200px;
			background-color: #000;
		}

		
	</style>
</head>
<body>

	<div class="nev"></div>
	<div class="header"></div>
	<div class="content">
		<p>index1</p>
		<p>index2</p>
		<p>index3</p>
		<p>index4</p>
		<p>index5</p>
		<p>index6</p>
		<p>index7</p>
		<p>index8</p>
		<p>index9</p>
		<p>index10</p>
	</div>
	<div class="floot"></div>


	<script src="../lib/jquery-1.8.3.min.js"></script>
	<script tpye="text/javascript">

		!function(window,document,$,undefined) {


			$(document).ready(function() {

				var h = $('.nev').height();
				console.log(h)

				$(window).on('scroll',function() {
					var s = $(this).scrollTop();
					
					if(s > h){
						$('.header').add('.content').addClass('fixed')
					}else {
						$('.header').add('.content').removeClass('fixed')
					}

				})

			})


		}(window,document,jQuery)

	</script>
	
</body>
</html>